<script setup lang="ts">
import SysDialog from '@/components/SysDialog/index.vue';
import useDialog from '@/hooks/useDialog';
import SvgIconList from '../SvgIcon/SvgIconList.vue';
import { ref } from 'vue'

const selectIcon = ref('')
const parentIcon = ref('')
const currentIcon = ref('')

// 弹框属性
const { dialog, onShow, onClose } = useDialog()

// 子组件传值给父组件
const emit = defineEmits(['select'])

// 弹框确定事件
const confirm = () => {
    emit('select', selectIcon.value)
    onClose()
}

// 供父组件调用，显示弹框
const show = async (icon: string) => {
    dialog.title = '选择图标'
    dialog.height = 450

    const icons = icon.split('-')
    // console.log("icons=", icons)
    parentIcon.value = icons[0]
    icons.splice(0, 1)
    currentIcon.value = icons.join('-')
    // console.log("parentIcon=" + parentIcon.value + " currentIcon=" + currentIcon.value)

    onShow()
}

defineExpose({
    show
})

const getSvgIcon = (iconStr: string) => {
    selectIcon.value = iconStr
}

</script>

<template>
    <SysDialog :title="dialog.title" :width="dialog.width" :height="dialog.height" :visible="dialog.visible"
        @onClose="onClose" @onConfirm="confirm">
        <template v-slot:content>
            <SvgIconList :operation="'select'" :parentIcon="parentIcon" :currentIcon="currentIcon"
                @selectIcon="getSvgIcon"></SvgIconList>
        </template>
    </SysDialog>
</template>